<template>
  <div id="tabItem">
      <div class="tab-bar-item" @click="activeClick">
          <div v-if="!isActive">
              <slot name="item-icon"></slot>
          </div>
          <div v-else>
              <slot name="item-icon-active"></slot>
          </div>
          <div :class="{active:isActive}">
              <slot name="item-text"></slot>
          </div>
          
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{

        }
    },
    props:{
        path:{
            type:String
        }
    },
    methods:{
        activeClick(){
            this.$router.replace(this.path)
        },
    },
    computed:{
        isActive(){
            return this.$route.path.indexOf(this.path) != -1
        },
    },
}
</script>

<style>
#tabItem{
    flex: 1;
    margin-top: 2px;
}
.active{
    color: #3460e5;
}
</style>